<template>
	<view class="mainPage" :style="{'padding-top': `${$store.state.safeArea.top || 0}px`, 'padding-bottom': `${$store.state.safeArea.bottom || 0}px`}">
		<public-head :title="title"></public-head>
		<view class="box">
			<u-tabs-swiper class="uTabs" ref="uTabs" inactive-color="#706F6F"  active-color="#FE7B09" :height="68" font-size="28" :list="list" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			<swiper class="swiper" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<view class="yuyuedingdan-list">
							
							<view class="" v-if="wenzhenList">
								<view class="yuyuedingdan-item" v-for="(item,index) in wenzhenList" :key="index" @click="tiaozhuan(item)">
										<view class="first-line">
											<view class="left">
												<image class="touxiang" :src="item.avatar" mode=""></image>
												<text class="name">{{item.nickname}}</text>
												<text class="pet-info" v-if="item.type!=3">{{item.race}} {{item.sex}} {{item.weight}}kg</text>
											</view>
											<view class="right">
												<text class="leixing">{{item.consultation_type}}</text>
												<text class="zhuangtai" :class="item.status==2||item.status==3||item.status==4?'active':''">{{item.statusname}}</text>
											</view>
										</view>
										<view class="fourth-line">
											<view class="wentimiaoshu">
												问题描述：
											</view>
											<view class="wenti">
												{{item.describe}}
											</view>
										</view>
										
										<view class="fifth-line">
											{{item.en_time}}  
										</view>
								</view>
								<!-- <view class="meiyou" v-if="wenzhenList.length>10">
									没有更多了～
								</view> -->
								<u-loadmore :status="status2" v-if="wenzhenList.length>=10"  :load-text="loadText" />
								
							</view>
							
							<view class="zanwuyuyue" v-else>
								<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/zanwu.png" mode=""></image>
								<text>暂无问诊</text>
							</view>
							
						</view>
					</scroll-view>
				</swiper-item>
				
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<view class="yuyuedingdan-list">
							
							<view class="" v-if="wenzhenList.length">
								<view class="yuyuedingdan-item" v-for="(item,index) in wenzhenList" :key="index" @click="tiaozhuan(item)">
									<navigator hover-class="none" url="" >
										<view class="first-line">
											<view class="left">
												<image class="touxiang" :src="item.avatar" mode=""></image>
												<text class="name">{{item.nickname}}</text>
												<text class="pet-info" v-if="item.type!=3">{{item.race}} {{item.sex}} {{item.weight}}kg</text>
											</view>
											<view class="right">
												<text class="leixing">{{item.consultation_type}}</text>
												<text class="zhuangtai" :class="item.status==2||item.status==3||item.status==4?'active':''">{{item.statusname}}</text>
											</view>
										</view>
										<view class="fourth-line">
											<view class="wentimiaoshu">
												问题描述：
											</view>
											<view class="wenti">
												{{item.describe}}
											</view>
										</view>
										
										<view class="fifth-line">
											{{item.en_time}}  
										</view>
									</navigator>
								</view>
								<u-loadmore :status="status2" v-if="wenzhenList.length>=10"  :load-text="loadText" />
								<!-- <view class="meiyou" v-if="daijiezhen.length>10">
									没有更多了～
								</view> -->
							</view>
							
							<view class="zanwuyuyue" v-else>
								<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/zanwu.png" mode=""></image>
								<text>暂无问诊</text>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<view class="yuyuedingdan-list">
							
							<view class="" v-if="wenzhenList">
								<view class="yuyuedingdan-item" v-for="(item,index) in wenzhenList" :key="index" @click="tiaozhuan(item)">
									<navigator hover-class="none" url="" >
										<view class="first-line">
											<view class="left">
												<image class="touxiang" :src="item.avatar" mode=""></image>
												<text class="name">{{item.nickname}}</text>
												<text class="pet-info" v-if="item.type!=3">{{item.race}} {{item.sex}} {{item.weight}}kg</text>
											</view>
											<view class="right">
												<text class="leixing">{{item.consultation_type}}</text>
												<text class="zhuangtai" :class="item.status==2||item.status==3||item.status==4?'active':''">{{item.statusname}}</text>
											</view>
										</view>
										<view class="fourth-line">
											<view class="wentimiaoshu">
												问题描述：
											</view>
											<view class="wenti">
												{{item.describe}}
											</view>
										</view>
										
										<view class="fifth-line">
											{{item.en_time}}  
										</view>
									</navigator>
								</view>
								<u-loadmore :status="status2" v-if="wenzhenList.length>=10"  :load-text="loadText" />
								<!-- <view class="meiyou" v-if="jinxingzhong.length>10">
									没有更多了～
								</view> -->
							</view>
							
							<view class="zanwuyuyue" v-else>
								<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/zanwu.png" mode=""></image>
								<text>暂无问诊</text>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<view class="yuyuedingdan-list">
							
							<view class="" v-if="wenzhenList.length">
								<view class="yuyuedingdan-item" v-for="(item,index) in wenzhenList" :key="index" @click="tiaozhuan(item)">
									<navigator hover-class="none" url="" >
										<view class="first-line">
											<view class="left">
												<image class="touxiang" :src="item.avatar" mode=""></image>
												<text class="name">{{item.nickname}}</text>
												<text class="pet-info" v-if="item.type!=3">{{item.race}} {{item.sex}} {{item.weight}}kg</text>
											</view>
											<view class="right">
												<text class="leixing">{{item.consultation_type}}</text>
												<text class="zhuangtai" :class="item.status==2||item.status==3||item.status==4?'active':''">{{item.statusname}}</text>
											</view>
										</view>
										<view class="fourth-line">
											<view class="wentimiaoshu">
												问题描述：
											</view>
											<view class="wenti">
												{{item.describe}}
											</view>
										</view>
										
										<view class="fifth-line">
											{{item.en_time}}  
										</view>
									</navigator>
								</view>
								<u-loadmore :status="status2" v-if="wenzhenList.length>=10"  :load-text="loadText" />
								<!-- <view class="meiyou" v-if="yiwancheng.length>10">
									没有更多了～
								</view> -->
							</view>
							
							<view class="zanwuyuyue" v-else>
								<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/zanwu.png" mode=""></image>
								<text>暂无问诊</text>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
							
									
			</swiper>
			
			<!-- <view class="nomore">
				没有更多了～
			</view> -->
		</view>
	</view>
</template>

<script>
	var that
	import publicHead from "@/components/publicHead/publicHead.vue"
	export default {
		components: {
			publicHead
		},
		data() {
			return {
				title: '我的问诊',
				
				list: [
					{
						name: '全部'
					}, 
					{
						name: '待接诊'
					}, 
					{
						name: '进行中'
					},
					{
						name: '已完成'
					}
				],
				tabs:[1,2,3,4],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				
				wenzhenList:[],
				daijiezhen:[],  //待接诊的数据表  0
				jinxingzhong:[], //进行中的数据表 1
				yiwancheng:[],  //已完成的数据表 2
				tabstatus:'', //0：待接诊，1：进行中，2：已完成
				status2: 'loadmore',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有更多啦'
				},
				page:1
			}
		},
		onLoad() {
			that=this
			that.requestData()
		},
		methods: {
			tiaozhuan(item){
				console.log(item);
				if(item.status == 0 || item.status == 1){
					uni.navigateTo({
						url:'../../pagesB/myclient/chatWindow?item=' + JSON.stringify(item)
					})
				}else if(item.status == 2){
					uni.navigateTo({
						url:'../../pagesB/mykehu/detail?item=' + JSON.stringify(item) + '&type=2'
					})
				}
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
				console.log(this.swiperCurrent)
				if(index==0){
					that.tabstatus=''//全部
					that.page=1
					console.log('全部')
				}else if(index==1){
					that.tabstatus=0//待接诊
					that.page=1
					console.log('待接诊')
				}else if(index==2){
					that.tabstatus=1//进行中
					that.page=1
					console.log('进行中')
				}else if(index==3){
					that.tabstatus=2//已完成
					that.page=1
					console.log('已完成')
				}
				
				that.requestData()
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				
				if(current==0){
					that.tabstatus=''//全部
					that.page=1
					console.log('全部')
				}else if(current==1){
					that.tabstatus=0//待接诊
					that.page=1
					console.log('待接诊')
				}else if(current==2){                                                                                                         
					that.tabstatus=1//进行中
					that.page=1
					console.log('进行中')
				}else if(current==3){
					that.tabstatus=2//已完成
					that.page=1
					console.log('已完成')
				}
				
				
				// this.current = current;
				// that.tabstatus=current+1;
				// that.page=1;
				that.requestData()
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if(that.status2 == 'nomore'){
					console.log('nomore')
					return
				}else{
					console.log("触底la")
					that.status2 = 'loading';
					that.page = ++ that.page;
					setTimeout(() => {
						that.requestData()
					}, 500)
					console.log("scroll-view到底部加载更多")
				}
				
			},
			
			
			requestData(){  //https://ask.suoweilai.com/Doctor_get_consultation   医生端 - 获取我的问诊列表页
				that.$postAjax1('Doctor_get_consultation',{
					status:that.tabstatus,
					page:that.page
				},function(data){
					// that.wenzhenList=data.data.data
					// console.log('that.wenzhenList',that.wenzhenList)
					console.log('触发')
					
					if(that.page==1){
					that.wenzhenList=data.data.data
					}else{
						that.wenzhenList=that.wenzhenList.concat(data.data.data)
					}
					if(data.data.data.length<10){
						
						that.status2 = 'nomore';
						console.log('没有更多了')
					} 
					else{
						that.status2 = 'loading';
						
						}
					
					// console.log(data.data.data)
					
					// for(var i=0;i<data.data.data.length;i++){
					// 	if(data.data.data[i].status==0){
					// 		that.daijiezhen.push(data.data.data[i])
					// 	}
					// 	if(data.data.data[i].status==1){
					// 		that.jinxingzhong.push(data.data.data[i])
					// 	}
					// 	if(data.data.data[i].status==2){
					// 		that.yiwancheng.push(data.data.data[i])
					// 	}
					// }
					
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.mainPage {
	display: flex;
	flex-direction: column;
}
.box{
	position: relative;
	width: 100%;
	flex: auto;
	display: flex;
	flex-direction: column;
	.swiper{
		flex: auto;
	}
	.yuyuedingdan-list{
		padding: 20rpx 32rpx 100rpx;
		.yuyuedingdan-item{
			padding: 20rpx 18rpx 36rpx 34rpx;
			margin-bottom: 20rpx;
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(97, 123, 185, 0.07);
			border-radius: 16rpx;
			.first-line{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 16rpx;
				
			
				.left{
					
					.touxiang{
						display: inline-block;
						width: 64rpx;
						height: 64rpx;
						margin-right: 12rpx;
						vertical-align: middle;
						border-radius: 50%;
					}
					.name{
						display: inline-block;
						font-size: 28rpx;
						font-weight: 500;
						color: #0D0E15;
						line-height: 40rpx;
						margin-right: 20rpx;
						vertical-align: middle;
						
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width:120rpx;
					}
					.pet-info{
						display: inline-block;
						font-size: 24rpx;
						font-weight: 400;
						color: #959595;
						line-height: 34rpx;
						vertical-align: middle;
					}
				}
				.right{
					.leixing{
						display: inline-block;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FA6400;
						line-height: 40rpx;
						border-radius: 30rpx;
						border: 2rpx solid #FF9636;
						margin-right: 24rpx;
						vertical-align: middle;
						padding: 10rpx 20rpx;
					}
					.zhuangtai{
						display: inline-block;
						font-size: 28rpx;
						font-weight: 400;
						color: #ED0B0D;
						line-height: 40rpx;
						vertical-align: middle;
						&.active{
							color: #AAAAAA;
						}
					}
				}
			}
			.second-line{
				margin-bottom: 28rpx;
				display: flex;
				.wenzhenleixing{
					width: 140rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #959595;
					line-height: 40rpx;
					vertical-align: middle;
				}
				.time{
					font-size: 28rpx;
					font-weight: 400;
					color: #242424;
					line-height: 40rpx;
					margin-right: 14rpx;
					vertical-align: middle;
				}
				.shijian{
					font-size: 28rpx;
					font-weight: 400;
					color: #242424;
					line-height: 40rpx;
					vertical-align: middle;
				}
			}
			.third-line{
				// margin-bottom: 28rpx;
				display: flex;
				justify-content: space-between;
				.left{
					.yuyuedianhua{
						display: inline-block;
						width: 140rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #959595;
						line-height: 40rpx;
						vertical-align: middle;
					}
					.dianhuahao{
						display: inline-block;
						font-size: 28rpx;
						font-weight: 400;
						color: #242424;
						line-height: 40rpx;
						vertical-align: middle;
					}
				}
				.right{
					font-size: 32rpx;
					font-weight: 400;
					line-height: 44rpx;
					color: #ED0B0D;
				}
			}
			.fourth-line{
				margin-bottom: 24rpx;
				display: flex;
				align-items: center;
				.wentimiaoshu{
					width: 140rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #959595;
					line-height: 40rpx;
				}
				.wenti{
					width: 340rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #242424;
					line-height: 40rpx;
					
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
			.fifth-line{
				font-size: 28rpx;
				font-weight: 400;
				line-height: 40rpx;
				color: #959595;
			}
		}
		
		.zanwuyuyue{
			padding-top: 450rpx;
			text-align: center;
			image{
				display: block;
				margin: auto;
				width: 220rpx;
				height: 220rpx;
				margin-bottom: 50rpx;
			}
			text{
				font-size: 28rpx;
				font-weight: 400;
				line-height: 40rpx;
				color: #959595;
			}
		}
		
		.meiyou{
			font-size: 28rpx;
			font-weight: 400;
			color: #959595;
			text-align: center;
			line-height: 40rpx;
		}
	}
	.nomore{
		position: absolute;
		bottom: 74rpx;
		left: 0;
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		font-weight: 400;
		color: #959595;
		line-height: 40rpx;
	}
}
</style>
